<script setup>
import { defaultSessions } from '../../assets/session'
import markdownit from 'markdown-it'
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'
import { useStore } from 'vuex';
import { ref,onMounted,watch,computed } from 'vue'
import ClipboardJS from 'clipboard';
import { ElMessage } from 'element-plus'
const store = useStore();
const sessionList = computed(() => store.state.sessionMsg);
const sayType = computed(() => store.state.sayType);

//初始化markdown-it
const mdi = markdownit({
    html: true,
    linkify: false,
    typographer: false,
    highlight(code, language) {
        const validLang = !!(language && hljs.getLanguage(language))

        if (validLang) {
            const lang = language ?? ''
            return highlightBlock(hljs.highlight(lang, code, true).value, lang)
        }
        return highlightBlock(hljs.highlightAuto(code).value, '')
    }
})

//语法高亮
function highlightBlock(str, lang) {
    lang = lang || 'text'
    return  '<pre class="pre-code-box">'+
                '<div class="pre-code-header">'+
                    '<span>'+
                        '<<span class="code-block-header__lang">'+
                            lang+
                        '</span>>'+
                    '</span>'+
                    `<span class="copy-btn" style="font-size:12px;display: flex;align-items: center;"><img src="../../assets/img/copy.png" height="20px"  />复制代码</span>`+
                '</div>'+
                '<div class="pre-code">'+
                    '<code class="hljs code-block-body '+lang+'"'+
                        '>'+
                        str+
                    '</code>'+
                '</div>'+
            '</pre>'
}

const changeItem = (item) => {
    return mdi.render(item)
}

onMounted(()=>{
    //复制
   initClipboard();
})
console.log(sessionList)
const initClipboard = () => {
    const clipboard = new ClipboardJS(".copy-btn", {
      text: function (trigger) {
        //复制的内容
        return trigger.parentNode.nextElementSibling.textContent
      },
    });
    clipboard
      .on('success', function (e) {
        ElMessage({
            message: '已复制到剪贴板',
            type: 'success',
        })
      })
      .on('error', function (e) {
        console.error('复制失败！');
      });
}
</script>


<template>
    <div class="home">

        <div v-for="item in sessionList" :key="item.request_id" :class="['flex',item.type=='me'?'right':'']">
            <img src="../../assets/img/icon.png" height="30px" v-if="item.type!='me'"/>
            <div class="content">
                <!-- 加载中 -->
                <div class="loading" v-if="item.type=='loading'">
                    <img src="https://gw.alicdn.com/imgextra/i1/O1CN01qPUtnk1KwvitibrhI_!!6000000001229-54-tps-50-50.apng" alt="" srcset="" height="15">
                </div>
                <!-- 普通会话 -->
                <div v-if="item.content"
                    v-html="changeItem(item.content)"
                    class="message"
                ></div>
                <!-- 图片会话 -->
                <!-- <div v-if="sayType==2&&item.text&&item.type!='loading'"
                    v-html="changeItem(item.text)"
                    class="message"
                ></div> -->
                <!-- 图片生成中 -->
                <!-- <div class="loading" v-if="item.type=='loading'">
                    <img src="https://gw.alicdn.com/imgextra/i1/O1CN01qPUtnk1KwvitibrhI_!!6000000001229-54-tps-50-50.apng" alt="" srcset="" height="15">
                </div> -->
                <!-- 图片列表 -->
                <!-- <div v-if="sayType==2&&item.output" class="imglist">
                    <el-image :src="x.url" :preview-src-list="[x.url]" alt="" srcset="" height="150" v-for="(x,index) in item.output.results"  :key="index" />
                </div> -->
            </div>
             <img src="../../assets/img/user.jpg" height="30px" v-if="item.type=='me'"/>
        </div>
    </div>
</template>

<style scoped lang="stylus">

.home
    height: 100%
    width: 100%
    .content
        width: calc(100% - 50px);
    .message
        margin: 0 10px
        padding-top: 5px;
        :deep(p)
            margin: 0 0 16px
            font-size: 13px
            white-space: pre-wrap; /* 保留空白符，但是正常换行 */
            word-wrap: break-word; /* 在长单词或URL地址内部进行换行 */
        :deep(ul,li)
            font-size: 13px
    .right
        justify-content: end
        .message
            // text-align: end;
            float: right
            max-width: calc(100% - 30px);
    .loading
        display: flex
        align-items: center
        height: 30px;
        font-size: 14px;
        padding: 0 10px;
    :deep(.pre-code-header)
        display: flex
        justify-content: space-between
        background-color: #2e2e35;
        padding: 5px 10px;
        color: #ccc;
        font-size: 1rem;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        span
            cursor pointer
    :deep(.hljs)
        background: #191b20;
    :deep(.code-block-body)
        padding:1.5rem;
        font-size: 14px;
        line-height: 1.5
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    .imglist
        .el-image
            height: 150px
            margin: 10px
</style>
